<template>
	<view>
		<view class="top" @click="compile"> {{state ? '编辑' : '完成'}} <text></text> </view>
		<!-- 购物车商品 -->
		<view class="page">
			<view class="view-block" v-for="item in list">

				<!-- 商品 -->
				<view class="view-item">
					<image src="../../static/xuanze.png" class="image-check"></image>
					<image src="../../static/gongju.png" class="image-cover"></image>
					<view class="view-right">
						<text class="text-name u-line-2">
							{{item.name}}
						</text>
						<view class="view-tpye">
							<text class="text-spec">{{item.serve}}</text>
						</view>
						<view class="view-price-box">
							<text class="text-price"> {{item.price}} <text style="font-size: 28rpx;">.9/套</text> </text>
							<u-number-box v-model="item.quantity" :min="1" @change="(value)=>{
								update(item.id,value)
							}"></u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部栏 -->
		<view class="view-footer" v-if="state">
			<view class="view-all-select">
				<image src="../../static/xuanze.png" class="image-check"></image>
				<text class="text-all-check">全选</text>
			</view>
			<view class="flex-grow"></view>
			<text class="text-label">合计：</text>
			<text class="text-money">￥123</text>
			<!-- <view class="del"> 删除 </view> -->
		</view>
		<view class="view-footer" v-else>
			<view class="view-all-select">
				<image src="../../static/unselected.png" class="image-check"></image>
				<text class="text-all-check">全选</text>
			</view>
			<view class="flex-grow"></view>
			<view class="del" @click="del"> 删除 </view>
		</view>
		<u-modal @cancel="show = false"  @confirm="affirm" :showCancelButton='true' :show="show" :title="title"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				title: '确定要删除选中的商品吗？',
				state: true,
				addNum: '',
				list: [{
					name: '得力(deli)家用工具箱套装电工木工维修五金60PC/090007',
					serve: '商品编号 046869',
					price: '￥13',
					id: 1,
					quantity: 1,
					checked: false
				}, {
					name: '得力(deli)家用工具箱套装电工木工维修五金60PC/090007',
					serve: '商品编号 046869',
					price: '￥13',
					id: 2,
					quantity: 1,
					checked: false
				}, {
					name: '得力(deli)家用工具箱套装电工木工维修五金60PC/090007',
					serve: '商品编号 046869',
					price: '￥13',
					id: 3,
					quantity: 1,
					checked: false
				}],
			}
		},
		methods: {
			// update() {
			// 	console.log('0000000')
			// }
			async update(id, count) {
				console.log(id, count.value)
				return;
			},
			compile() {
				this.state = !this.state
			},
			del() {
				this.show = true
			},
			affirm() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.top {
		height: 60rpx;
		text-align: right;
		background-color: #FFFFFF;
		line-height: 60rpx;
		font-size: 26rpx;

		text {
			display: inline-block;
			width: 30rpx;
		}
	}

	.page {
		padding: 0 30rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 120rpx !important;

		.view-block {
			background-color: #FFFFFF;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;

			.view-title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.image-check {
					width: 31rpx;
					height: 31rpx;
				}

				.image-shops {
					width: 39rpx;
					height: 37rpx;
					margin: 0 20rpx;
				}

				.image-right {
					width: 12rpx;
					height: 19rpx;
					margin-left: 20rpx;
				}
			}

			.view-item {
				background: #FFFFFF;
				border-radius: 13rpx;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;

				.image-check {
					width: 31rpx;
					height: 31rpx;
				}

				.image-cover {
					width: 200rpx;
					height: 200rpx;
					margin: 0 20rpx;
					border-radius: 10rpx;
				}

				.view-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.text-name {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.view-tpye {
						display: flex;
						align-items: center;
						margin: 5rpx 0 20rpx;

						.text-spec {
							font-size: 26rpx;
							color: #666;
						}
					}

					.view-price-box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.text-price {
							font-size: 38rpx;
							color: #E50014;
						}

					}
				}
			}
		}
	}

	.view-footer {
		height: 98rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;

		.view-all-select {
			display: flex;
			align-items: center;
		}

		.flex-grow {
			width: 360rpx;
		}

		.del {
			font-size: 28rpx;
			color: #666;
			margin-left: 140rpx;
		}

		.image-check {
			width: 35rpx;
			height: 35rpx;
			margin-right: 15rpx;
		}

		.text-all-check {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.text-label {
			font-size: 28rpx;
			color: #222;
		}

		.text-money {
			font-size: 38rpx;
			font-weight: bold;
			color: #E50014;
		}
	}
</style>
